<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    :title="title"
    width="813px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <el-form
        ref="formRef"
        :model="currentDetail"
        :rules="formRules"
        label-position="right"
        label-width="110"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="场景类型：" prop="sceneId">
              <el-select
                v-if="type === 'edit'"
                class="search-select"
                v-model="currentDetail.sceneId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) of dict['scene_type']"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
              <span v-else class="value">{{ currentDetail.sceneId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场景编号：" prop="sceneCode">
              <el-input
                v-if="type === 'edit'"
                v-model="currentDetail.sceneCode"
                placeholder="请输入"
              />
              <span v-else class="value">{{ currentDetail.sceneCode }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="设备名称：" prop="name">
              <el-input
                v-if="type === 'edit'"
                v-model="currentDetail.name"
                placeholder="请输入"
              />
              <span v-else class="value">{{ currentDetail.name }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备位置：" prop="location">
              <el-input
                v-if="type === 'edit'"
                v-model="currentDetail.location"
                placeholder="请输入"
              />
              <span v-else class="value">{{ currentDetail.location }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="设备状态：" prop="status">
              <el-select
                v-if="type === 'edit'"
                v-model="currentDetail.status"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) of dict['device_status']"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
              <span v-else class="value">
                <el-tag
                  :type="
                    getDictStyle('device_status', currentDetail.status) ||
                    'info'
                  "
                >
                  {{ getDictValue('device_status', currentDetail.status) }}
                </el-tag>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报警状态：" prop="warningStatus">
              <el-select
                v-if="type === 'edit'"
                v-model="currentDetail.warningStatus"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) of dict['warning_status']"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
              <span v-else class="value">
                <el-text
                  :type="
                    getDictStyle('warning_status', currentDetail.warningStatus)
                  "
                >
                  {{
                    getDictValue('warning_status', currentDetail.warningStatus)
                  }}
                </el-text>
              </span>
            </el-form-item>
            <span class="value">{{ currentDetail.warning }}</span>
          </el-col>

          <el-col :span="12">
            <el-form-item label="设备序列号：" prop="no">
              <el-input
                v-if="type === 'edit'"
                v-model="currentDetail.no"
                placeholder="请输入"
              />
              <span v-else class="value">{{ currentDetail.no }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型：" prop="type">
              <el-select
                v-if="type === 'edit'"
                v-model="currentDetail.type"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) of dict['device_type']"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
              <span v-else class="value">
                {{ getDictValue('device_type', currentDetail.type) }}
              </span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="设备型号：" prop="code">
              <el-input
                v-if="type === 'edit'"
                v-model="currentDetail.code"
                placeholder="请输入"
              />
              <span v-else class="value">{{ currentDetail.code }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厂商：" prop="manufacturer">
              <el-input
                v-if="type === 'edit'"
                v-model="currentDetail.manufacturer"
                placeholder="请输入"
              />
              <span v-else class="value">{{ currentDetail.manufacturer }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="经度：" prop="lon">
              <el-input
                v-if="type === 'edit'"
                v-model="currentDetail.lon"
                placeholder="请输入"
              />
              <span v-else class="value">{{ currentDetail.lon }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度：" prop="lat">
              <el-input
                v-if="type === 'edit'"
                v-model="currentDetail.lat"
                placeholder="请输入"
              />
              <span v-else class="value">{{ currentDetail.lat }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属园区：" prop="park">
              <el-select
                v-if="type === 'edit'"
                v-model="currentDetail.park"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="item of parkList"
                  :key="item.pkid"
                  :label="item.name"
                  :value="item.pkid"
                />
              </el-select>
              <span v-else class="value">
                {{
                  parkList.find((item) => item.pkid === currentDetail.park)
                    ?.name || ''
                }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="安装图片：">
              <el-upload v-if="type === 'edit'" />
              <div v-else class="imgs-wrapper">
                <div class="imgs">
                  <el-image
                    class="imgs-item"
                    v-for="(item, index) of currentDetail.img"
                    :key="index"
                    :src="item"
                    :zoom-rate="1.2"
                    :max-scale="7"
                    :min-scale="0.2"
                    :preview-src-list="currentDetail.img"
                    :initial-index="index"
                    fit="cover"
                  />
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <template v-if="type === 'edit'" #footer>
      <el-row style="width: 100%" justify="end" align="middle">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'

// import azImg1 from '@/assets/imgs/manager/azImg1.png'
// import azImg2 from '@/assets/imgs/manager/azImg2.png'
import { useDict } from '@/hooks/useDict'

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
  parkList: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['close'])

const { dict, getDictValue, getDictStyle } = useDict([
  'scene_type',
  'device_type',
  'device_status',
  'warning_status',
])

const formRef = ref()

const dialogVisible = ref(false)

const title = ref('')

const type = ref('add')

const currentDetail = ref({})

const formRules = ref({
  sceneId: [
    {
      message: '场景不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  sceneCode: [
    {
      message: '场景编号不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  name: [
    {
      message: '设备名称不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  location: [
    {
      message: '设备位置不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  status: [
    {
      message: '设备状态不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  warningStatus: [
    {
      message: '报警状态不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  no: [
    {
      message: '设备序列号不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  type: [
    {
      message: '设备类型不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  code: [
    {
      message: '设备型号不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  manufacturer: [
    {
      message: '厂商不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  lon: [
    {
      message: '经度不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  lat: [
    {
      message: '维度不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
  park: [
    {
      message: '所属园区不能为空',
      required: true,
      trigger: ['blur', 'change'],
    },
  ],
})

const handleCancel = () => {
  handleClose()
}

const handleSave = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      console.log('save', currentDetail.value)
    }
  })
}

const handleClose = () => {
  dialogVisible.value = false
  formRef.value?.resetFields()
  emit('close')
}

watch(
  () => props.detail,
  (val) => {
    // currentDetail.value = {
    //   scene: '摄像头',
    //   sceneCode: '123456',
    //   name: '大门摄像头1',
    //   address: '大门东侧',
    //   status: 1,
    //   warning: '正常',
    //   no: 'SX12315',
    //   type: '周界摄像机',
    //   code: 'DS-2CD3T46WDV3-L',
    //   manufacturer: '海康威视',
    //   lat: '120.8329223',
    //   lon: '32.12736389',
    //   park: '蔡家园区',
    //   updateTime: '2024-01-08 12:10:00',
    //   img: [azImg1, azImg2, azImg2, azImg2],
    // }
    currentDetail.value = {
      ...val,
      status:
        val.status !== undefined && val.status !== null
          ? val.status.toString()
          : undefined,
      warningStatus:
        val.warningStatus !== undefined && val.warningStatus !== null
          ? val.warningStatus.toString()
          : undefined,
    }
  },
)

watch(
  () => dialogVisible.value,
  (val) => {
    if (val) {
      formRef.value?.resetFields()
    }
  },
)

defineExpose({ dialogVisible, title, type })
</script>
<style lang="scss" scoped>
.el-form-item {
  width: 100%;
  margin-bottom: 0;
}

.imgs-wrapper {
  margin-top: 15px;
  width: 100%;
  overflow-x: auto;
  .imgs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    &-item {
      min-width: 230px;
      height: 150px;
      margin-right: 12px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
